<template>
  <div class="container">
    <!-- 用户 -->
    <div class="user">
      <!-- 用户头像 -->
      <div class="userMsg" @click="edit">
        <div class="userIcon">
          <img v-if="!userImg" src="../assets/img/男头像.png" alt="" />
          <img v-else :src="$axios.defaults.baseURL + userImg" alt="" />
        </div>
        <!-- 用户信息 -->
        <div class="userInfo">
          <div class="username">
            <!-- 动态性别 -->
            <span
              :class="{
                'iconfont iconxingbienan': gender,
                'iconfont iconxingbienv': !gender,
              }"
            ></span>
            <span class="nickname">{{ userNickName }}</span>
          </div>
          <div class="bir">2019-10-10</div>
        </div>
      </div>
      <span class="iconfont iconjiantou1" @click="edit"></span>
    </div>
    <!-- 组件 -->
    <PersonalCell me="我的关注" des="关注的用户" @click.native="attention" />
    <PersonalCell me="我的跟帖" des="跟帖回复" @click.native="comments" />
    <PersonalCell
      me="我的收藏"
      des="文章/视频"
      @click.native="$router.push('/mycollection')"
    />
    <PersonalCell me="设置" @click.native="$router.push('/edit/' + data.id)" />
    <PersonalCell me="退出" @click.native="quit" />
  </div>
</template>

<script>
import { getUserInfo } from "@/api/userInfo";
import PersonalCell from "../components/PersonalCell";
export default {
  components: {
    PersonalCell,
  },
  data() {
    return {
      userImg: "",
      userNickName: "",
      bir: "",
      gender: true,
      data: "",
    };
  },
  created() {
    this.userInfo();
  },
  methods: {
    userInfo() {
      getUserInfo().then((res) => {
        console.log(res);
        this.data = res.data.data;
        console.log(this.data);
        this.userImg = res.data.data.head_img;
        this.userNickName = res.data.data.nickname;
        // this.gender = res.data.data.gender;
        if (res.data.data.gender === 0) {
          this.gender = false;
        } else {
          this.gender = true;
        }
      });
    },
    edit() {
      this.$router.push("/edit/" + localStorage.getItem("user_id"));
    },
    attention() {
      this.$router.push("/myAttention/" + localStorage.getItem("user_id"));
    },
    comments() {
      this.$router.push("/mycomments/" + localStorage.getItem("user_id"));
    },
    quit() {
      localStorage.clear();
      this.$toast("退出成功");
      this.$router.replace("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background-color: #e4e4e4;
  .user {
    display: flex;
    align-items: center;
    padding: 0 20/360 * 100vw;
    margin-bottom: 10/360 * 100vw;
    height: 150 /360 * 100vw;
    width: 100%;
    background-color: #f2f2f2;
    display: flex;
    justify-content: space-between;
    .userMsg {
      height: 100/360 * 100vw;
      display: flex;
      justify-content: space-between;
      .userIcon {
        width: 100/360 * 100vw;
        height: 100/360 * 100vw;
        background-color: #000;
        border-radius: 50/360 * 100vw;
        overflow: hidden;
        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
      }
      .userInfo {
        padding-left: 10/360 * 100vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .username {
          font-size: 16/360 * 100vw;
          .iconxingbienan {
            color: #77baeb;
            padding-right: 5/360 * 100vw;
          }
          .iconxingbienv {
            color: palevioletred;
            padding-right: 5/360 * 100vw;
          }
        }

        .bir {
          padding-top: 3/360 * 100vw;
          color: #baadad;
        }
      }
    }
    .iconjiantou1 {
      font-size: 20/360 * 100vw;
      color: #baadad;
    }
  }
  .my {
    background-color: #f2f2f2;
  }
  .myAttention {
    margin-top: 3/360 * 100vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // width: 100%;
    height: 50/360 * 100vw;
    // padding: 0 20/360 * 100vw;
    margin-left: 20/360 * 100vw;
    padding-right: 20/360 * 100vw;
    background-color: #f2f2f2;
    border-bottom: 2px solid#e8e8e8;
    .right {
      color: #baadad;
    }
  }
}
</style>